import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, 
  DatePicker, Modal, message, Badge, Divider,Table,Popconfirm, Pagination,List,Avatar,} from 'antd';
import StandardTable from 'components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './UserList.less';
import UserEditModal from './UserEditModal';


const FormItem = Form.Item;

const data3 = [
  {
    title: '超级管理员',
  },
  {
    title: '普通用户',
  },
  {
    title: '运维人员',
  },
  {
    title: '开发人员',
  },
];



// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};


@connect(({ userList, loading }) => ({
  userList,
  loading: loading.models.userList,
}))
@Form.create()
export default class UserList extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'userList/fetch',
      //current3pageSize
      payload:{
        current:1,
        pageSize:3
      },

    });
  };
  handleAdd=(fields)=>{
    this.props.dispatch({
      type: 'userList/add',
      payload: {
        name: fields.name,
        age:fields.age,
        address:fields.address,
      },
    });
    message.success('添加成功');
  };
  deleteHandler=(key)=>{
    this.props.dispatch({
      type: 'userList/remove',
      payload: {
        key:key
      },
    });
    message.success('删除成功');
};
handleEdit=(record)=>{
  //TODO
  console.info(record)

};
handleTableChange = (pagination) => {
    const { dispatch } = this.props;
    const params = {
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
    };

    dispatch({
      type: 'userList/fetch',
      payload: params,
    });
  };
  handleSearch = (e) => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const pagination={current:1,
        pageSize:3};

      const values = {
        ...fieldsValue,
        ...pagination,
        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
      };


      dispatch({
        type: 'userList/fetch',
        payload: values,
      });
    });
  };
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    dispatch({
      type: 'userList/fetch',
      payload: {
        current:1,
        pageSize:3
      },
    });
  };
  renderForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={9} sm={24}>
            <FormItem label="用户名">
              {getFieldDecorator('name')(
                <Input placeholder="请输入" />
              )}
            </FormItem>
          </Col>
          <Col md={9} sm={24}>
            <FormItem label="地址">
              {getFieldDecorator('address')(
                <Input placeholder="请输入" />
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
     );
  }
  
  render(){
          const columns = [{
        title: '用户名',
        dataIndex: 'name',
      }, {
        title: '年龄',
        dataIndex: 'age',
      }, {
        title: '地址',
        dataIndex: 'address',
      },
      {
        title: '操作',
        dataIndex: 'opertation',
        render: (text , record ,index)  =>(<div>
          <UserEditModal title="新增用户" record={record} onOk={this.handleEdit}>
          <a >修改</a>
           </UserEditModal>
          <Divider type="vertical" />
        <Popconfirm title="确认要删除吗?" onConfirm={this.deleteHandler.bind(null, record.key)}>
                  <a href="">删除</a>
        </Popconfirm>
        </div>),
      }];

    const { userList: { data }, loading } = this.props;
    const{list,pagination}=data;
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
    };
    const total=data.length;
    return (
      <PageHeaderLayout >
      <Row>
      <Col span={6}>
      <Card title="角色列表" className={styles.userCard} extra={<a href="www.baidu.com"><Icon type="plus" /></a>}>
      <List
    itemLayout="horizontal"
    dataSource={data3}
    renderItem={item => (
      <List.Item actions={[<a><Icon type="edit" /></a>,<a><Icon type="minus" /></a>]}>
        <List.Item.Meta
          title={<a href="https://ant.design">{item.title}</a>}
        />
      </List.Item>
    )}/>
      </Card>
      
      </Col>
      <Col span={18}>
      <div className={styles.userList}>
      <div className={styles.tableListForm}>
              {this.renderForm()}
            </div>
      <div className={styles.userListOperator}>
      <UserEditModal title="新增用户" record={{}} onOk={this.handleAdd}>
             <Button con="plus" type="primary">新建</Button>
          </UserEditModal>
      </div>        
      <Table rowSelection={rowSelection} columns={columns} dataSource={list} loading={loading} pagination={paginationProps}
      onChange={this.handleTableChange}/>
      </div>
      </Col>
    </Row>
      
      
      </PageHeaderLayout>);
  }
}

